<template>
  <div class="container">
    <baidu-map
      :style="area"
      class="bm-view"
      ak="GPO8jLk2SoDXF5nnaOdDudHxIsMVEK6V"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      :mapStyle="mapStyle"
    >
      <bm-view :style="area"></bm-view>
      <!-- bm-marker 就是标注点 定位在point的经纬度上 跳动的动画 -->
      <bm-marker
        v-for="(item, index) in map_user_dot"
        :key="index"
        :position="{ lng: item.lng, lat: item.lat }"
        :title="item.name"
        animation="BMAP_ANIMATION_BOUNCE"
      ></bm-marker>
    </baidu-map>
  </div>
</template>

<script>
import { BaiduMap, BmView, BmMarker } from "vue-baidu-map";
import styleJson from "@/options/custom_map_config.json";
export default {
  components: { BaiduMap, BmView, BmMarker },
  props: {
    datalist: {
      type: Array,
      default: function () {
        return [];
      },
    },
    map_center: {
      type: Object,
      default: function () {
        return { lng: 115.89352755, lat: 28.689578 };
      },
    },
  },
  data() {
    return {
      styleJson,
      area: {
        width: "100%",
        height: "100%",
      },
      mapStyle: {
        styleJson: [],
      },
      center: { lng: 115.89352755, lat: 28.689578 },

      zoom: 11,
      map_user_dot: this.datalist,
    };
  },
  watch: {
    datalist: {
      handler(val, oldVal) {},
      deep: true,
    },
    map_center: {
      handler(val) {
        this.center = val;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {},
  mounted() {},
  created() {
    this.mapStyle.styleJson = styleJson;
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #04192c;
}
.bm-view {
  width: 100%;
  height: 100%;
}
</style>